들어가며

깃허브(GitHub) 지킬에서 사이드 메뉼에 필터링을 구현 하는 방법에 대해 설명 합니다. 현재 보고 계신 페이지의 왼쪽에 사이드 메뉴 맨 위에 있는 필터 상자와 같은 구현입니다.

<!-- 문자열 필터링 하는 스크립트 -->
<script>
    $('input[type="text"]').keyup(function(){

    var that = this, $allListElements = $('ul > li');
    // 특정 class를 가진 ul 에서만 필터링 할 경우 아래처럼.
    // var that = this, $allListElements = $('ul[class="post-api-list"] > li');

    var $matchingListElements = $allListElements.filter(function(i, li){
        var listItemText = $(li).text().toUpperCase(), 
            searchText = that.value.toUpperCase();
        return ~listItemText.indexOf(searchText);
    });

    $allListElements.hide();
    $matchingListElements.show();

});
</script>

<!-- 필터링할 문자 입력용 text input -->
<div class="form-group has-success">
  <input type="text" class="form-control input-sm" placeholder="Filter">
</div>